<template>
	<view class="content">
		<view class="box">
			<view class="people-box u-flex">
				<view class="box-title">
					会议名称
				</view>
				<view class="imgs-box u-flex">
					<u-input v-model="form.title" placeholder="请输入会议名称" inputAlign="right" fontSize="13"
						class="u-flex-input"></u-input>
					<!-- <u-icon name="arrow-right" color="#666666" size="14"></u-icon> -->
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					会议室类型
				</view>
				<view class="imgs-box u-flex">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view class="uni-input u-flex-input">{{form.type_text}}</view>
					</picker>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					签到方式
				</view>
				<view class="imgs-box u-flex">
					<picker @change="bindPickerChange2" :value="index2" :range="array2" range-key="name">
						<view class="uni-input u-flex-input">{{form.sign_type_text}}</view>
					</picker>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>

			<view class="people-box u-flex">
				<view class="box-title">
					发起人
				</view>
				<view class="imgs-box u-flex">
					<view class="imgs-box2">
						<view class="item-img-bg" v-for="(item1,i) in form.faqi_ids" :key="i">{{strFormat(item1.name)}}</view>
						<!-- <u--image class="user-img" v-for="(item1,i) in form.faqi_ids" :key="i" :src="item1.avatar"
							shape="circle" width="40rpx" height="40rpx">
						</u--image> -->
					</view>
					<text class="add-btn" @click="pickUser('faqi')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>

			<view class="people-box u-flex">
				<view class="box-title">
					参会人
				</view>
				<view class="imgs-box u-flex">
					<view class="imgs-box2">
						<view class="item-img-bg" v-for="(item1,i) in form.attend_meet_ids" :key="i">{{strFormat(item1.name)}}</view>
						<!-- <u--image class="user-img" v-for="(item1,i) in form.attend_meet_ids" :key="i"
							:src="item1.avatar" shape="circle" width="40rpx" height="40rpx">
						</u--image> -->
					</view>
					<text class="add-btn" @click="pickUser('attend_meet')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					议题参与人
				</view>
				<view class="imgs-box u-flex">
					<view class="imgs-box2">
						<view class="item-img-bg" v-for="(item1,i) in form.attend_topic_ids" :key="i">{{strFormat(item1.name)}}</view>
						<!-- <u--image class="user-img" v-for="(item1,i) in form.attend_topic_ids" :key="i"
							:src="item1.avatar" shape="circle" width="40rpx" height="40rpx">
						</u--image> -->
					</view>
					<text class="add-btn" @click="pickUser('attend_topic')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<!-- <view class="people-box u-flex">
				<view class="box-title">
					审核人
				</view>
				<view class="imgs-box u-flex">
					<u--image class="user-img" v-for="(item1,i) in form.approver_ids" v-if="i<1" :key="i" :src="item1.avatar"
						shape="circle" width="40rpx" height="40rpx">
					</u--image>
					<text class="add-btn">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view> -->
			<view class="people-box u-flex">
				<view class="box-title">
					签发人
				</view>
				<view class="imgs-box u-flex">
					<view class="item-img-bg" v-for="(item1,i) in form.issued_ids" :key="i">{{strFormat(item1.name)}}</view>
					<!-- <u--image class="user-img" v-for="(item1,i) in form.issued_ids" :key="i" :src="item1.avatar"
						shape="circle" width="40rpx" height="40rpx">
					</u--image> -->
					<text class="add-btn" @click="pickUser('issued')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					校长
				</view>
				<view class="imgs-box u-flex">
					<!-- <u--image class="user-img" v-for="(item1,i) in form.check_ids" :key="i" :src="item1.avatar"
						shape="circle" width="40rpx" height="40rpx">
					</u--image> -->
					<view class="item-img-bg" v-for="(item1,i) in form.check_ids" :key="i">{{strFormat(item1.name)}}</view>
					<text class="add-btn" @click="pickUser('check')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
      <view class="people-box u-flex" v-if="form.type=='1'||form.type=='2'">
        <view class="box-title">
          议题收集人
        </view>
        <view class="imgs-box u-flex">
          <!-- <u--image class="user-img" v-for="(item1,i) in form.check_ids" :key="i" :src="item1.avatar"
            shape="circle" width="40rpx" height="40rpx">
          </u--image> -->
          <view class="item-img-bg" v-for="(item1,i) in form.shouji_ids" :key="i">{{strFormat(item1.name)}}</view>
          <text class="add-btn" @click="pickUser('shouji')">+</text>
          <u-icon name="arrow-right" color="#666666" size="14"></u-icon>
        </view>
      </view>
		</view>
		<u-button class="save-btn" @click="saveForm">保存</u-button>
		<u-button class="reset-btn" @click="resetForm">重置</u-button>
		<!-- 会议室类型弹框 -->
	</view>
</template>

<script>
	import {
		getoptionsmeetdetail,
		getoptionsChoose,
		getoptionsAdd,
		typemeetclear
	} from '@/api/meetRoomApi.js'
	export default {
		data() {
			return {
				auth_icon: require('@/static/img/mettingRoomConfig/auth-icon.png'),
				form: {
					title: '',
					type: '',
					sign_type: '',
					faqi_ids: [],
					attend_meet_ids: [],
					attend_topic_ids: [],
					issued_ids: [],
					check_ids: [],
          shouji_ids:[]
				},
				info: {
					faqi_ids_user: '',
					attend_meet_ids_user: '',
					attend_topic_ids_user: '',
					issued_ids_user: '',
					check_ids_user: '',
          shouji_ids_user:''
				},
				array: [],
				array2: [],
				index: 0,
				index2: 0,
				type: ''
			};
		},
		onReady() {
			this.getoptionsChooseData()
			this.getoptionsmeetdetailData(this.$route.query.id)
		},
		onLoad(options) {},
		onShow() {
			var userlist = uni.getStorageSync('sel_user_list');
			console.log("userlist****", userlist, this.type);
			var ids = '';
			var users = [];
			if (userlist && userlist.length > 0) {
				for (var i = 0; i < userlist.length; i++) {
					ids = i == 0 ? userlist[i].id : ids + "," + userlist[i].id;
				}
				users = userlist;
				console.log("111", this.form)
				// if (uni.getStorageSync('ext_data')) {
				//   this.form = Object.assign(this.form, uni.getStorageSync('ext_data'));
				// }
				if (this.type == "faqi") {
					this.form.faqi_ids = users;
					this.info.faqi_ids_user = ids;
				} else if (this.type == "attend_meet") {
					this.form.attend_meet_ids = users;
					this.info.attend_meet_ids_user = ids;
				} else if (this.type == "attend_topic") {
					this.form.attend_topic_ids = users;
					this.info.attend_topic_ids_user = ids;
				} else if (this.type == "issued") {
					this.form.issued_ids = users;
					this.info.issued_ids_user = ids;
				} else if (this.type == "check") {
					this.form.check_ids = users;
					this.info.check_ids_user = ids;
				} else if (this.type == "shouji") {
          this.form.shouji_ids = users;
          this.info.shouji_ids_user = ids;
        }
				uni.setStorageSync('ext_data', this.form);
				console.log("222", ids, users, this.form)
			}
		},
		methods: {
			strFormat(str){
				if(str.length>3){
					return str.substring(0,3)+'...';
				}else{
					return str
				}
			},
			getoptionsmeetdetailData(id) {
				let params = {
					id: id
				}
				getoptionsmeetdetail(params).then(res => {
					this.form = res.data
					uni.setStorageSync('ext_data', this.form);
					uni.removeStorageSync('sel_user_list');
					console.log("8888888", res, this.form)
					for (var i = 0; i < this.form.faqi_ids.length; i++) {
						this.info.faqi_ids_user = i == 0 ? this.form.faqi_ids[i].id : this.info.faqi_ids_user +
							"," + this.form.faqi_ids[i].id;
					}
					for (var i = 0; i < this.form.attend_meet_ids.length; i++) {
						this.info.attend_meet_ids_user = i == 0 ? this.form.attend_meet_ids[i].id : this.info
							.attend_meet_ids_user + "," + this.form.attend_meet_ids[i].id;
					}
					for (var i = 0; i < this.form.attend_topic_ids.length; i++) {
						this.info.attend_topic_ids_user = i == 0 ? this.form.attend_topic_ids[i].id : this.info
							.attend_topic_ids_user + "," + this.form.attend_topic_ids[i].id;
					}
					for (var i = 0; i < this.form.issued_ids.length; i++) {
						this.info.issued_ids_user = i == 0 ? this.form.issued_ids[i].id : this.info
							.issued_ids_user + "," + this.form.issued_ids[i].id;
					}
					for (var i = 0; i < this.form.check_ids.length; i++) {
						this.info.check_ids_user = i == 0 ? this.form.check_ids[i].id : this.info.check_ids_user +
							"," + this.form.check_ids[i].id;
					}
          for (var i = 0; i < this.form.shouji_ids.length; i++) {
            this.info.shouji_ids_user = i == 0 ? this.form.shouji_ids[i].id : this.info.shouji_ids_user +
                "," + this.form.shouji_ids[i].id;
          }
					if (this.array.length > 0) {
						this.array.forEach((e, idx) => {
							if (e.id == this.form.type) {
								this.index = idx
							}
						})
					}
					if (this.array2.length > 0) {
						this.array2.forEach((e, idx) => {
							if (e.id == this.form.sign_type) {
								this.index2 = idx
							}
						})
					}
				})
			},
			getoptionsChooseData() {
				getoptionsChoose().then(res => {
					console.log(res)
					this.array = res.data.typelists
					this.array2 = res.data.sign_type
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index = e.detail.value
				this.form.type = this.array[this.index].id
				this.form.type_text = this.array[this.index].name
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index2 = e.detail.value
				this.form.sign_type = this.array2[this.index2].id
				this.form.sign_type_text = this.array2[this.index2].name
			},
			pickUser(type) {
				this.type = type;
				var user_ids = 0;
				if (this.type == 'faqi') {
					user_ids = this.info.faqi_ids_user;
				} else if (this.type == "attend_meet") {
					user_ids = this.info.attend_meet_ids_user;
				} else if (this.type == "attend_topic") {
					user_ids = this.info.attend_topic_ids_user;
				} else if (this.type == "issued") {
					user_ids = this.info.issued_ids_user;
				} else if (this.type == "check") {
					user_ids = this.info.check_ids_user;
				} else if (this.type == "shouji") {
          user_ids = this.info.shouji_ids_user;
        }
				uni.setStorageSync('sel_user_ids', "0," + user_ids);
				const url = "/pages/tabbar/meeting-room/change/index?user_ids=" + user_ids
				uni.navigateTo({
					url,
				});

			},
			saveForm() {
				let params = {
					id: this.form.id,
					title: this.form.title,
					type: this.form.type,
					sign_type: this.form.sign_type,
					faqi_ids: JSON.stringify(this.form.faqi_ids),
					attend_meet_ids: JSON.stringify(this.form.attend_meet_ids),
					attend_topic_ids: JSON.stringify(this.form.attend_topic_ids),
					issued_ids: JSON.stringify(this.form.issued_ids),
					check_ids: JSON.stringify(this.form.check_ids),
          shouji_ids: JSON.stringify(this.form.shouji_ids)
				}
				console.log("222--params", params)
				getoptionsAdd(params).then(res => {
					console.log(res)
					if (res.code === 1) {
						this.$toast('保存成功');
						uni.removeStorageSync('ext_data');
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					} else {
						this.$toast(res.msg);
					}

				})
			},
			resetForm() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '您确定要删除吗?',
					success: function(res) {
						if (res.confirm) {
							typemeetclear({
								id: _this.form.id
							}).then(res => {
								console.log(res)
								if (res.code === 1) {
									_this.getoptionsmeetdetailData(_this.form.id)
									_this.$toast('重置成功');
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}

	};
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
		padding-bottom: 150rpx;
	}

	.u-flex {
		display: flex;
		align-items: center;
	}

	/deep/..uni-picker-container .uni-picker-custom * {
		color: #333333 !important;
		font-size: 28rpx !important;
	}

	.u-flex-input {
		color: #333333 !important;
		font-size: 28rpx !important;
	}

	.u-flex-input .uni-input-placeholder {
		color: #999999 !important;
		text-align: right !important;
		font-size: 28rpx !important;
	}

	.title-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		width: 80%;
	}

	.user text {
		font-size: 24rpx;
		font-weight: 500;
		color: #4871C0;
		margin-left: 10rpx;
	}

	.box-part {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 30rpx 10rpx 30rpx;
	}

	.box-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		min-width: 120rpx;
	}

	.box-row {
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.box-row text:first-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	.box-row text:last-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.box {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.people-box {
		justify-content: space-between;
		padding: 30rpx;
	}

	.u-flex-input /deep/.uni-picker {
		color: #333333 !important;
		text-align: right !important;
		font-size: 28rpx !important;
	}

	.u-flex-input .uni-input-placeholder {
		color: #999999 !important;
		text-align: right !important;
		font-size: 28rpx !important;
	}

	.people-box:first-child {
		border-bottom: 2px solid #F8F8F8;
	}

	.add-btn {
		background-color: #4871C0;
		border-radius: 100%;
		color: #ffffff;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.user-img {
		margin-right: 20rpx;
	}
    .item-img-bg{
		margin-right: 20rpx;
    	width:64rpx;
		height:64rpx;
		border-radius: 50%;
		background-color: #4871C0;
		color: #ffffff;
		font-size: 20rpx;
		text-align: center;
		line-height: 64rpx;
    }
	.imgs-box2,
	.imgs-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		flex: 1;
	}

	.save-btn {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom:100rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		background-color: #4871C0;
		border-radius: 8rpx;
		width: calc(100% - 40rpx);
	}
	.reset-btn{
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 0;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		background-color: #4871C0;
		border-radius: 8rpx;
		width: calc(100% - 40rpx);
	}
</style>
